<template>
    <div id="customer">
        <el-form :inline="true" :model="customerInfo" class="demo-form-inline">
            <div class="locationItem">
                <el-form-item label="客户名称">
                    <el-input class="input-item" v-model="customerInfo.name" placeholder="客户名称"></el-input>
                </el-form-item>
                <el-form-item label="客户经理">
                    <el-input class="input-item" v-model="customerInfo.managerName" placeholder="客户经理"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="margin-left: 30px;" @click="getCustomerList">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData.records" :highlight-current-row="true"
            style="max-height: 75%;width: 100%;margin-top: 60px;">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="用户名称"/>
            <el-table-column prop="managerName" label="客户经理" />
            <el-table-column prop="address" label="地区" />
            <el-table-column prop="phone" label="联系电话" />
            <el-table-column prop="fax" label="传真" />
            <el-table-column prop="levelName" label="客户等级" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <i class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>
        <div class="pager">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="current" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                modName: '销售机会',
                customerInfo: {},
                tableData: [],
                current: 1,
                pageSize: 5,
                currentIndex: '',
                currentRow: '',
            }
        }, methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.getCustomerList();
            }, handleCurrentChange(val) {
                this.current = val;
                this.getCustomerList();
            }, handleEdit(index, row) {
                sessionStorage.setItem('customer', JSON.stringify(row));
                this.$router.push({ name: 'editInfo' });
            }, getCustomerList() {
                let _this = this;
                _this.$http.get('/customer/customerInfo', {
                    params: {
                        pageIndex: _this.current,
                        pageSize: _this.pageSize,
                        name: _this.customerInfo.name,
                        managerName: _this.customerInfo.managerName
                    }
                }).then(function (ret) {
                    _this.tableData = ret.data;
                    _this.customerInfo = {};
                });
            }, getManagerOptios() {
                let _this = this;
                if (_this.managerOptions.length == 0) {
                    _this.$http.get('customer/customerInfo/managerInfo').then(function (ret) {
                        if (ret.data.code == 0) {
                            _this.managerOptions = ret.data.data;
                        } else {
                            _this.managerOptions.push = ['暂无数据'];
                        }
                    });
                }
            }
        }, created() {
            this.getCustomerList();
        }
    }
</script>

<style scoped>
    #customer {
        width: 93%;
        padding: 0 43px;
    }

    .input-item {
        width: 305.4px;
    }

    .el-form-item {
        margin: 0 0 22px 11px !important;
    }

    .locationItem {
        position: relative;
        top: 30px;
        left:-11px;
    }

    .pager {
        text-align: center;
        margin-top: 10px;
    }

    .el-input,
    .el-select {
        width: 260px;
    }
</style>